import { dom } from '@knno/dom';
import { button } from '@knno/ui/button';
import { Action } from '@knno/ui/action';
import { Dialog } from '@knno/ui/dialog';
import { Progress } from '@knno/ui/progress';
import { Waiting } from '@knno/ui/waiting';
import { bar } from './index.css';

export function showDialog() {
	return [
		dom.h2().text('对话框'),
		dom.div(bar).append(
			button()
				.text('等待')
				.on('click', () => {
					Waiting.show();
					setTimeout(() => {
						Waiting.close();
					}, 2000);
				}),
			button()
				.text('进度条')
				.on('click', () => {
					let value = 0;
					Progress.show();
					function updateValue() {
						let message = null;
						if (value === 30) {
							message = '正在加载，请稍后...';
						} else if (value === 70) {
							message = null;
						} else {
							message = undefined;
						}
						Progress.update(value, message);
						if (value < 100) {
							value++;
							setTimeout(updateValue, 50);
						} else {
							setTimeout(() => {
								Progress.close();
							}, 1000);
						}
					}
					updateValue();
				}),
			button()
				.text('消息框')
				.on('click', () => {
					Dialog.alert('这是一个普通消息！');
				}),
			button()
				.text('提示框')
				.on('click', () => {
					Dialog.tips('这是一个提示消息！', '提示');
				}),
			button()
				.text('警告框')
				.on('click', () => {
					Dialog.warning('这是一个警告消息！', '警告');
				}),
			button()
				.text('错误框')
				.on('click', () => {
					Dialog.error('这是一个错误消息！', '错误');
				}),
			button()
				.text('成功框')
				.on('click', () => {
					Dialog.success('这是一个成功消息！', '成功');
				}),
			button()
				.text('不带标题只有图标')
				.on('click', () => {
					Dialog.error('这是一个错误消息！');
				}),
			button()
				.text('询问框')
				.on('click', () => {
					Dialog.confirm('是否确认？', '确认').then((value) => Dialog.alert('选择结果：' + value));
				}),
			button()
				.text('输入框')
				.on('click', () => {
					Dialog.prompt({ message: '请输入日期：', placeholder: 'YYYY-MM', verify: /^\d{4}-\d{2}$/ }).then((value) =>
						Dialog.alert(value + '')
					);
				}),
			button()
				.text('自定义对话框')
				.on('click', () => {
					Dialog.create(...showDialog())
						.autoClose(true)
						.show();
				}),
			button()
				.text('连开多个')
				.on('click', () => {
					Dialog.create(...showDialog())
						.autoClose(true)
						.show();
					setTimeout(() => Dialog.success('成功消息！'));
					setTimeout(
						() =>
							Dialog.create(...showDialog())
								.autoClose(true)
								.show(),
						100
					);
					setTimeout(() => Dialog.error('错误消息', '错误'), 200);
				}),
			button()
				.text('ActionSheet')
				.on('click', () => {
					Action.show(...showDialog());
				})
		),
	];
}
